<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            display: flex;
            width: 1200px;
            flex-wrap: wrap;
            margin: auto;
        }

        li {
            width: 23%;
            margin: 1%;
            border: 1px solid #ddd;
            text-align: center;
            box-sizing: border-box;
        }
        img {
            width: 100%;
        }
    </style>
</head>
<body>

    <h2>商品列表</h2>

    <ul>
        <!-- <li>
            <a href="">
                <img src="" alt="">
                <h3>标题</h3>
                <p>描述</p>
                <strong>99</strong>
            </a>
        </li> -->
    </ul>

    <script src="../js/ajax.js"></script>

    <script>


        // 商品列表是如何进入商品详情页的
        //    详情页的路径后面拼接参数 --- 商品的id
        //     一个网页在地址栏后面拼接?key=value&key=value 不会对网页的路径产生影响



        const oUl = document.querySelector('ul');

        ajax({
            type : 'get' ,
            path : 'http://192.168.58.110/php/list.php' ,
            success : res => {
                
               
                console.log(res);
                const {status , data} = res ;
                if(status) {
                    let html = '' ;
                    data.forEach(item => {
                        html += `
                        <li>
                            <a href="./06_商品详情页.html?suiBian=${item.goods_id}">
                                <img src="${item.goods_img}" alt="">
                                <h3>${item.goods_title}</h3>
                                <p>${item.goods_des}</p>
                                <strong>${item.goods_price}</strong>
                            </a>
                        </li>
                        `
                    })

                    oUl.innerHTML = html ;
                }
            }
        })

    </script>
    
</body>
</html>